import 'package:flutter/material.dart';

class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key? key}) : super(key: key);

  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  var _username = new TextEditingController();
  var _password;
  @override
  void initState() {
    super.initState();
    _username.text = "初始值";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表演演示页面"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        // child: TextDemo(),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(hintText: "请输入用户名"),
              controller: _username,
              onChanged: (value) {
                setState(() {
                  _username.text = value;
                });
              },
            ),
            SizedBox(
              height: 20,
            ),
            //第二种方法
            TextField(
              obscureText: true,
              decoration: InputDecoration(hintText: "密码"),
              onChanged: (value) {
                setState(() {
                  _password = value;
                });
              },
            ),
            Container(
              width: double.infinity,
              height: 40,
              child: ElevatedButton(
                onPressed: () {
                  print(this._username.text);
                  print(_password);
                },
                child: Text("登录"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          TextField(),
          SizedBox(
            height: 20,
          ),
          TextField(
            decoration: InputDecoration(
                hintText: "请输入搜索的内容", border: OutlineInputBorder()),
          ),
          TextField(
            maxLines: 4,
            decoration:
                InputDecoration(hintText: "多行", border: OutlineInputBorder()),
          ),
          SizedBox(
            height: 20,
          ),
          TextField(
            decoration:
                InputDecoration(border: OutlineInputBorder(), labelText: "用户名"),
          ),
          SizedBox(
            height: 20,
          ),
          TextField(
            obscureText: true,
            decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "密码",
                labelStyle: TextStyle()),
          ),
          TextField(
            decoration:
                InputDecoration(icon: Icon(Icons.people), hintText: "请输入用户名"),
          ),
        ],
      ),
    );
  }
}
